<template>
  <v-group :config="groupConfig">
    <v-rect :config="rectConfig" @mousemove="$emit('mousemove',$event)"/>
    <v-text :config="textConfig"/>
  </v-group>
</template>

<script>
  import VueKonva from "@/components/vue-konva";

  const {vGroup, vLine, vRect, vText} = VueKonva
  export default {
    // name: "vText",
    components: {vGroup, vRect, vText},
    props: {
      config: Object
    },
    computed: {
      groupConfig() {
        return {
          x: this.config.x,
          y: this.config.y,
          width: this.config.width,
          height: this.config.height,
        }
      },
      rectConfig() {
        return {
          ...this.config,
          // width: this.config.width,
          // height: this.config.height,
          x: 0,
          y: 0,
          stroke: this.config.bgStroke,
          fill: this.config.bgColor,
          strokeWidth: this.config.strokeWidth,
          opacity: this.config.opacity,
        }
      },
      textConfig() {
        return {
          listening: false,
          x: this.config.strokeWidth / 2,
          y: this.config.strokeWidth / 2,
          width: this.config.width - this.config.strokeWidth,
          height: this.config.height - this.config.strokeWidth,
          text: this.config.text,
          fill: this.config.fill,
          fontSize: this.config.fontSize,
        }
      }
    }
  }
</script>

<style scoped>

</style>
